<template>
  <div class="detail">
    <myHeader>
      <template #left>
        <div class="left" @click="$router.back()">
          <i class="iconfont icon-fanhui"></i>
        </div>
      </template>
      <template #center>
        <div class="center">课程详情</div>
      </template>
      <template #right>
        <div></div>
      </template>
    </myHeader>
    <div class="box">
      <div class="title">{{list.title}}</div>
      <div class="price">{{list.price}}</div>
      <div class="browse_num">
        共{{list.total_periods}}课时 |
        {{list.browse_num}}人已报名
      </div>
    </div>
    <div class="box1">
      <p>教学团队</p>
      <div class="box1-li">
        <div class="li" v-for="(item,index) in twoList" ::key="index">
          <img :src="item.teacher_avatar" alt="">
          <div class="box1-name">
            {{item.teacher_name}}
          </div>
        </div>
      </div>
    </div>
    <div class="introduce">
      <div class="title">课程介绍</div>
      <p>test</p>
    </div>
    <div class="introduce">
      <div class="title">课程大纲</div>
      <p>test</p>
    </div>
    <footer>
      立即报名
    </footer>
  </div>
</template>

<script>
  import myHeader from "../common/myHeader.vue";
  import { bookDetail } from "../../request/http.js";
  export default {
    data() {
      return {
        id: "",
        list: {},
        twoList: [],
      };
    },
    created() {
      this.id = this.$route.query.id;
      bookDetail(this.id).then(res => {
        console.log(res);
        this.list = res.info
        this.twoList = res.teachers
      })
    },
    components: {
      myHeader
    }
  };
</script>

<style lang="scss" scoped>
  .myHeader {
    font-size: .4rem;
    border-bottom: .02rem solid #f5f5f5;

    .left {
      color: #007aff;
    }
  }

  .box {
    width: 100%;
    height: 3.4rem;
    background-color: #fff;
    padding: .3rem .5rem;

    .title {
      font-size: .44rem;
    }

    .price {
      color: orange;
      font-size: .44rem;
      margin: .3rem 0;
    }

    .browse_num {
      font-size: .44rem;
      color: #666;
    }
  }

  .box1 {
    margin: .6rem 0;
    background-color: #fff;
    height: 3.6rem;
    padding: .3rem .5rem;

    >p {
      font-size: .44rem;
    }

    .box1-li {
      display: flex;
      img {
        width: 1.3rem;
        height: 1.3rem;
        border-radius: 50%;
        margin-top: .4rem;
      }
      .li{
        margin-right: .2rem;
        text-align: center;
      }
    }
  }

  .introduce{
    width: 100%;
    height: 2.7rem;
    background-color: #fff;
    margin-bottom: .6rem;
    padding: .2rem .5rem;
      .title{
        font-size: 0.44rem;
      }
      p{
        margin-top: .4rem;
      }
  }

  footer{
    width: 100%;
    height: 1.2rem;
    background-color: #eb6100;
    line-height: 1.2rem;
    text-align: center;
    color: #fff;
    font-size: .45rem;
    position: fixed;
    left: 0;
    bottom: 0;
  }
</style>